<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>实现input表单和object对象的一个属性的双向数据绑定</title>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  </style>
</head>
<body>
  <div id="box" class="box">
  <input id="input1" type="text" v-model="title" />
  <input id="input2" type="text" v-model="title" />
  <div id="div1" v-bind="title"></div>
  <div id="div1" v-bind="aaaa"></div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
  <script type="text/javascript">
    let aaaa = {}
  function  View()  {
    let proxy = new Proxy(aaaa, {
      get(obj, property) {

      },
      set (obj, property, val) {
        obj[property] = val 
         document.querySelectorAll(`[v-model=${property}]`).forEach(item => {
            item.value =  val
         })
         document.querySelectorAll(`[v-bind=${property}]`).forEach(item => {
            item.innerHTML = val
         })

         return true
      }
    });

    this.init = function() {
      const modelList = document.querySelectorAll('[v-model]')
      modelList.forEach(model => {
        model.addEventListener('keyup', function(evt) {
           proxy[this.getAttribute('v-model')] = this.value;
        })
      })
    }

  }

  new View().init()
  </script>
</body>
</html>